<template>
  <!--  右边竖线-->
  <div class=" TopClassBorder"></div>
  <!--  底部白线-->
  <div class=" TopClassBorderBotton"></div>

  <div class="swiper WeGao1Swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide sw1">


        <div class="Title">
          <transition>
            <div class="Title1" v-if="activeIndex===0">
              协同白衣使者<br/>开创健康未来
            </div>
          </transition>
          <transition>
            <div v-if="activeIndex===0" class="Title2">Your Health We Care</div>
          </transition>
          <transition>
            <div v-if="activeIndex===0" class="TitleButton">探索威高
              <svg
                  class="icon"
                  viewBox="0 0 23 10"
                  xmlns="http://www.w3.org/2000/svg"
                  width="2rem" height="1rem">
                <path
                    class="iconPath"
                    stroke-linecap="round"
                    stroke="white"
                    stroke-width="1.52941"
                    d="M0.912109 8.25H21.3187C21.9889 8.25 22.3349 7.44921 21.8756 6.96119L16.9709 1.75"
                />
              </svg>
            </div>
          </transition>
        </div>


      </div>
      <div class="swiper-slide sw2">
        <div class="Titleone">
          <transition>
            <div class="Titleone1" v-if="activeIndex===1">
              致力于成为中国最强、国际一流<br/>
              最受人尊敬的医疗器械和医药创新型企业
            </div>
          </transition>
          <transition>
            <div v-if="activeIndex===1" class="Titleone2">To Be The Strongest In China, Best-In-Class Globally<br/>
              The Most Respected Innovative Medical Devices And Pharmaceutical Company
            </div>
          </transition>
          <transition>
            <div v-if="activeIndex===1" class="TitleButtonone">探索威高
              <svg
                  class="icon"
                  viewBox="0 0 23 10"
                  xmlns="http://www.w3.org/2000/svg"
                  width="2rem" height="1rem">
                <path
                    class="iconPath"
                    stroke-linecap="round"
                    stroke="white"
                    stroke-width="1.52941"
                    d="M0.912109 8.25H21.3187C21.9889 8.25 22.3349 7.44921 21.8756 6.96119L16.9709 1.75"
                />
              </svg>
            </div>
          </transition>
        </div>


      </div>
      <div class="swiper-slide sw3">

        <div class="Titletwo">
          <transition>
            <div class="Titletwo1" v-if="activeIndex===2">
              满足并努力超越顾客的<br/>
              最大需求
            </div>
          </transition>
          <transition>
            <div v-if="activeIndex===2" class="Titletwo2">Meet And Strive To Exceed The Customer's Greatest Needs</div>
          </transition>
          <transition>
            <div v-if="activeIndex===2" class="TitleButtontwo">探索威高
              <svg
                  class="icon"
                  viewBox="0 0 23 10"
                  xmlns="http://www.w3.org/2000/svg"
                  width="2rem" height="1rem">
                <path
                    class="iconPath"
                    stroke-linecap="round"
                    stroke="white"
                    stroke-width="1.52941"
                    d="M0.912109 8.25H21.3187C21.9889 8.25 22.3349 7.44921 21.8756 6.96119L16.9709 1.75"
                />
              </svg>
            </div>
          </transition>
        </div>

      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script setup>
import {onMounted, ref, toRefs} from "vue";
import '../css/wg.css'
const props= defineProps({
  activeMainIndex: {
    type: Number,
    default: 0
  },
})
const {activeMainIndex}=toRefs(props)
defineOptions({name: "WeGao1"})

const show = ref(true)

const activeIndex = ref(0)
onMounted(() => {
  const WG1Swiper = new Swiper(".WeGao1Swiper", {
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
      clickableClass: 'my-pagination-clickable',
      renderBullet(index, className) {
        return `${GetCustom(index, className)}`;

      },
    },
    // autoplay: {
    //   delay: 3000,
    //   stopOnLastSlide: false,
    //   disableOnInteraction: true,
    // },
  });
  WG1Swiper.on('slideChange', () => {
    activeIndex.value = WG1Swiper.activeIndex
    // 要先渲染后更新才行
    WG1Swiper.pagination.render();
    WG1Swiper.pagination.update();
  });
})

function GetCustom(index, className) {
  if (activeIndex.value === index) {
    return `<span class="${className} ">
           <div class="ClassOne">
             <div>${index + 1}</div>
             <div class="ClassList"></div>
           </div>
          </span>`
  } else {
    return `<span class="${className}">${index + 1}</span>`
  }

}

</script>

<style scoped lang="scss">
.TopClassBorder {
  position: fixed;
  width: 1px;
  height: 100%;
  z-index: 2;
  background: white;
  top: 10%;
  right: 10%;
}
.TopClassBorderBotton {
  position: fixed;
  width: 100%;
  z-index: 2;
  border: 1px solid white;
  bottom: 10%;
}


.sw1 {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;


  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {
    background-image: url("/src/assets/WeGao/mini/2.jpg");
  }

  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    background-image: url("/src/assets/WeGao/ss.jpg");
  }
  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    background-image: url("/src/assets/WeGao/ss.jpg");
  }

}

.sw2 {
  background-size: cover;
  background-repeat: no-repeat;
  @media (max-width: 600px) {
    background-image: url("/src/assets/WeGao/mini/1.jpg");
  }

  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    background-image: url("/src/assets/WeGao/sy.jpg");
  }
  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    background-image: url("/src/assets/WeGao/sy.jpg");
  }
}

.sw3 {

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {
    background-image: url("/src/assets/WeGao/mini/3.jpg");
  }

  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    background-image: url("/src/assets/WeGao/3.jpg");
  }
  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    background-image: url("/src/assets/WeGao/3.jpg");
  }
}


.v-enter-active {
  transition: all 2s ease-out;
}

.v-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.v-enter-from,
.v-leave-to {
  transform: translateY(2rem);
  opacity: 0;

}

.Title {
  position: absolute;
  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {
    margin-top: 80%;
    margin-left: 10%;
  }

  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    margin-top: 30%;
    margin-left: 10%;
  }
  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    margin-top: 15%;
    margin-left: 10%;
  }
}

.Titleone {
  position: absolute;
  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {
    margin-top: 50%;
    margin-left: 10%;
  }

  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    margin-top: 30%;
    margin-left: 10%;
  }
  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    margin-top: 15%;
    margin-left: 10%;
  }
}

.Titletwo {
  position: absolute;
  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {
    margin-top: 60%;
    margin-left: 10%;
  }

  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    margin-top: 30%;
    margin-left: 10%;
  }
  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    margin-top: 15%;
    margin-left: 10%;
  }
}

.Title1 {

  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {
    margin-top: 20%;
    font-size: 30px;

  }

  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    font-size: 40px;
    margin-top: 20%;
  }

  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    font-size: 60px;
    margin-top: 20%;
  }
  font-weight: 600;
  color: white;
}

.Title2 {

  font-weight: 600;
  color: white;
  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {

    font-size: 15px;

  }

  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    font-size: 20px;
  }

  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    font-size: 30px;
    margin-top: 5%;
  }
}

.TitleButton {
  position: absolute;
  padding: 0.5rem 1rem 0.5rem 1rem;

  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  border: 0.1rem solid white;
  transform: skewX(-15deg); /* 根据需要调整斜切的度数 */
  overflow: hidden; /* 确保内容不会被斜切 */
  display: flex;
  align-items: center;
  color: white;

  .icon {
    margin-left: 0.5rem;
    fill: none;
  }
}


.Titleone1 {

  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {

    font-size: 30px;

  }

  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    font-size: 40px;
  }

  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    font-size: 60px;
  }
  font-weight: 600;
  color: white;
}

.Titleone2 {

  font-weight: 600;
  color: white;
  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {

    font-size: 15px;

  }

  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    font-size: 20px;
  }

  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    font-size: 30px;
    margin-top: 5%;
  }
}

.TitleButtonone {
  position: absolute;
  padding: 0.5rem 1rem 0.5rem 1rem;

  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  border: 0.1rem solid white;
  transform: skewX(-15deg); /* 根据需要调整斜切的度数 */
  overflow: hidden; /* 确保内容不会被斜切 */
  display: flex;
  align-items: center;
  color: white;

  .icon {
    margin-left: 0.5rem;
    fill: none;
  }
}


.Titletwo1 {

  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {

    font-size: 30px;

  }

  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    font-size: 40px;
  }

  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    font-size: 60px;
  }
  font-weight: 600;
  color: white;
}

.Titletwo2 {

  font-weight: 600;
  color: white;
  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {

    font-size: 15px;

  }

  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    font-size: 20px;
  }

  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    font-size: 30px;
    margin-top: 5%;
  }
}

.TitleButtontwo {
  position: absolute;
  padding: 0.5rem 1rem 0.5rem 1rem;

  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  border: 0.1rem solid white;
  transform: skewX(-15deg); /* 根据需要调整斜切的度数 */
  overflow: hidden; /* 确保内容不会被斜切 */
  display: flex;
  align-items: center;
  color: white;

  .icon {
    margin-left: 0.5rem;
    fill: none;
  }
}

.TitleButton:hover {
  background: radial-gradient(circle at center, purple, transparent);
  animation: spreadToPurple 2s ease-out forwards;

  .icon {
    margin-left: 0.5rem;

    .iconPath {
      stroke: #00559b;
    }
  }
}

.TitleButtonone:hover {
  background: radial-gradient(circle at center, purple, transparent);
  animation: spreadToPurple 2s ease-out forwards;

  .icon {
    margin-left: 0.5rem;

    .iconPath {
      stroke: #00559b;
    }
  }
}

.TitleButtontwo:hover {
  background: radial-gradient(circle at center, purple, transparent);
  animation: spreadToPurple 2s ease-out forwards;

  .icon {
    margin-left: 0.5rem;

    .iconPath {
      stroke: #00559b;
    }
  }
}

@keyframes spreadToPurple {
  0% {
    color: #00559b;
    background-size: 0 0;
  }
  100% {
    color: #00559b;
    background-size: 100% 100%;
  }
}


.swiper {
  width: 100%;
  height: 100%;
}

.swiper .my-pagination-clickable {
  width: 100%;
  padding-left: 30%;
}

:deep(.swiper-pagination-bullet) {
  width: 2rem;
  height: 2rem;
  //text-align: center;
  font-size: 1rem !important;
  color: #000;
  opacity: 1;
  //未选中背景色透明
  background: rgba(0, 0, 0, 0) !important;
}

//对应的选中的参数
:deep(.swiper-pagination-bullet-active) {
  width: 6rem !important;
  color: white !important;
  font-size: 1rem !important;
}


</style>

